import React, { memo } from 'react';
import { Spin } from 'antd';
import classnames from 'classnames';

import RcBreadcrumb from '../RcBreadcrumb';

import './index.less';

type PageContanierProps = {
  ghost?: boolean;
  loading?: boolean;
  className?: string;
  headerClassName?: string;
  contentClassName?: string;
  items?: {
    name: string;
    path?: string;
  }[];
  extra?: React.ReactNode;
  children?: React.ReactNode;
  onBack?: () => void;
};

const PageContanier: React.FC<PageContanierProps> = props => {
  const {
    loading = false,
    ghost,
    className,
    headerClassName,
    contentClassName,
    items,
    extra,
    children,
    onBack,
  } = props;

  const isHeader = items?.length || extra;

  return (
    <div className={classnames('page-container', className)}>
      {isHeader ? (
        <div className={classnames('page-container_header', headerClassName)}>
          <RcBreadcrumb items={items} onBack={onBack} />
          <div className="rc-breadcrumb_extra">{extra}</div>
        </div>
      ) : null}
      <Spin spinning={loading}>
        <div
          className={classnames('page-container_content', contentClassName, {
            'page-container_ghost': ghost,
          })}
        >
          {children}
        </div>
      </Spin>
    </div>
  );
};

export default memo(PageContanier);
